<template>
  <div class="editNickName" ref="homePage">
    <van-nav-bar @click-left="clickleft" style="background: #ececec;" :title="type==='name'?'修改昵称':'修改邮箱'" left-text=""
      left-arrow>
      <div slot="right" class="searcha">
      </div>
    </van-nav-bar>
    <div style="width: 100%;height: 46px;"></div>
    <div v-if="type==='name'">
       <div class="content">
         <input class="input-box" v-model="content" placeholder="请输入昵称" type="text" />
         <div class="btn_btn" @click="save('Nickname')" >保存</div>
       </div>
    </div>
    <div v-else>
      <div class="content">
        <input class="input-box" v-model="content" placeholder="请输入邮箱号" type="text" />
        <div class="btn_btn" @click="save('Email')" >保存</div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    setUserInfo
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        type: this.$route.query.type,
        content:'',
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods: {
      clickleft() {
        this.$router.back(-1);
        console.log(1)
      },
      save(tyep){
        // console.log(tyep)
        let data = {
          DoType:tyep,
          Value:this.content
        }
        setUserInfo(data).then(res=>{
          console.log(res)
          if (res.Code == 0) {
                this.$router.back(-1);
               this.$toast("更改成功");
               
          } else{
              this.$toast(res.Msg);
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .editNickName {
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          color: white !important;
          // font-size: 1.25rem;
        }
      }

    }
    .content {
      padding: 0 0.625rem;
      padding-top: 2.9375rem;

      .input-box {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 5px;
        font-size: 14px;
        margin-bottom: 3.125rem;
        background: white;
        height: 40px;
        // border: none;
      }

      .btn_btn {
        line-height: 40px;
        height: 40px;
        color: white;
        border-radius: 0.25rem;
        background: #46d0ca;
        text-align: center;
        font-size: 16px;
        border-radius: 30px;
      }
    }
  }
</style>
